import { UserOutlined , LogoutOutlined} from '@ant-design/icons';
import { Dropdown, Avatar} from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate } from "react-router-dom";
import { logout } from "@/store/reducers/global";
import { adminApi } from '@/services/admin';
import styles from './index.less';


const AvatarDropdown = (_props) => {
    const userInfo = useSelector((state) => state.global.userInfo);

    const navigate = useNavigate();
    const dispatch = useDispatch()

    const items = [
        {
            label: "个人中心",
            key: "userinfo",
            icon: <UserOutlined />,
            onClick: () => {
                
                navigate("/userinfo", { replace: true });
                
            },
        },
        {
            label: "退出登录",
            key: "logout",
            icon: <LogoutOutlined />,
            onClick: () => {
                adminApi.loginOut().then(_res=>{
                    // 登出成功
                    dispatch(logout())
                })
                navigate("/login", { replace: true });
                
            },
        },
    ];

    return (
        <Dropdown  menu={{ items }} trigger={['click']}>
            <div className={styles.avatarbox}>
                <Avatar size={30} icon={<UserOutlined />} src={userInfo?.avatar||null} alt="logo"/>
                <div className={styles.name}>{userInfo?.name||''}</div>
            </div>
        </Dropdown>
    )
}
export default AvatarDropdown;